import { useRef } from "react";
import { Chat } from "./components/chat";
import { Conversation } from "./components/conversation";
import { useAppState } from "./components/provider/context";

function App() {
  const { chatId, sendMsg } = useAppState();
  const ipt1Ref = useRef<HTMLInputElement>(null);
  const ipt2Ref = useRef<HTMLInputElement>(null);

  return (
    <div
      style={{
        marginTop: "-60px",
        height: "100vh",
        width: "100vw",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        gap: "10px",
      }}
    >
      <div className="actions">
        <div className="action">
          <input type="number" ref={ipt1Ref} defaultValue={100_0000} />
          <button
            onClick={() => {
              window.putManyMsg(Number(ipt1Ref.current?.value));
            }}
          >
            来点消息
          </button>
        </div>
        <div className="action">
          <input
            type="text"
            ref={ipt2Ref}
            defaultValue={"这是一条普通的文本消息"}
          />
          <button
            onClick={() => {
              sendMsg(ipt2Ref.current!.value ?? "这是一条普通的文本消息");
            }}
          >
            发送消息
          </button>
        </div>
      </div>
      <div
        style={{
          height: "60%",
          width: "100%",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Conversation />
        <Chat chatId={chatId} />
      </div>
    </div>
  );
}

export default App;
